<template>
  <div class="re-box">
    <div class="re-container">
      <el-steps
        :active="active"
        style="padding-bottom:20px;"
      >
        <el-step title="身份验证"></el-step>
        <el-step title="密码修改成功"></el-step>
      </el-steps>
      <div
        v-show="step1"
        class="step"
      >
         <el-form
          ref="rePasswordFormRef"
          :rules="rePasswordFormRules"
          :model="rePasswordForm"
        >
          <el-form-item prop="mainValues">
            <el-input
              type="text"
              :disabled='inputFlag'
              suffix-icon="el-icon-user"
              placeholder="请输入邮箱或者绑定邮箱的ID"
              v-model="rePasswordForm.mainValues"
            />
          </el-form-item>

          <el-form-item prop="captcha">
            <el-col :span="11">
              <el-input
                type="text"
                maxlength="4"
                suffix-icon="el-icon-lock"
                placeholder="验证码"
                v-model="rePasswordForm.captcha"
              />
            </el-col>
            <el-col
              :span="13"
              style="padding-left: 20px;"
            >
              <el-button
                class="sendBtn"
                type="primary"
                @click="getCaptcha"
                :disabled='btnFlag'
              >{{captchaFlagTip}}</el-button>
            </el-col>
          </el-form-item>
           <div style="padding-top: 12px; display:flex; justify-content:space-between;">
            <el-button @click="stepFunction">下一步</el-button>
            <el-button @click="toLogin">
              返回Login
            </el-button>
          </div>
        </el-form>
         </div>

      <div
        v-show="step2"
        class="step"
      >
          <div class="step2-container">
          <span style="color:#00cc00; user-select: none; font-size:14px;"> 验证成功！您的新密码为：</span>
          <el-tooltip placement="right-start">
            <div slot="content">点击复制</div>
            <div
              class="tag"
              ref="copy"
              @click="copyPassword"
            >{{newPassword}}</div>
          </el-tooltip>
          <div class="toLoginBtn">
            <el-button
              type='primary'
              size="small"
              @click="toLogin"
            >
              返回Login
            </el-button>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getretrievePass, compareCaptcha } from "../../api/user";
import Clipboard from "clipboard";
export default {
  name: "retrievePassword",
  data() {
    return {
      // 初始计数 步骤
      active: 1,
      step: 1,
      // 页面标签
      step1: true,
      step2: false,
      // 表单
      rePasswordForm: {
        mainValues: "",
        captcha: "",
      },
      // 按钮名称
      captchaFlagTip: "发送验证码",
      // 倒计时
      auth_time: 60,
      // 按钮标识
      btnFlag: false,
      inputFlag: false,
      // 新密码
      newPassword: "dasasdasdasdasd",

      rePasswordFormRules: {
        mainValues: [
          { required: true, trigger: "blur", message: "输入值不能为空" },
        ],
        captcha: [
          { required: true, trigger: "blur", message: "输入值不能为空" },
        ],
      },
    };
  },
  mounted() {
    this.copyPassword();
  },
  watch: {
    "rePasswordForm.mainValues": {
      immediate: true, // immediate选项可以开启首次赋值监听,
      handler() {
        if (
          this.rePasswordForm.mainValues.length === 0 ||
          !this.rePasswordForm.mainValues
        ) {
          this.btnFlag = true;
        } else {
          this.btnFlag = false;
        }
      },
    },
    step: {
      immediate: true,
      handler() {
        if (this.active > 2) this.active = 1;
        if (this.step > 2) this.step = 1;
        switch (this.step) {
          case 1:
            this.step1 = true;
            this.step2 = false;
            break;
          case 2:
            this.step1 = false;
            this.step2 = true;
            break;
        }
      },
    },
    captchaFlagTip: {
      immediate: true,
      handler(){
        if(this.captchaFlagTip == '重新发送'){
          this.auth_time = 60
        }
      }
    }
  },

  methods: {
    stepFunction() {
      this.$refs.rePasswordFormRef.validate(async (valid) => {
        if (valid) {
          const { data } = await compareCaptcha(
            this.rePasswordForm.mainValues,
            this.rePasswordForm.captcha
          );
          this.newPassword = data.newPassword;
          if (data.flag) {
            this.step++;
            this.active++;
          }
        }
      });
    },
    getCaptcha() {
      this.sendCaptcha(this.rePasswordForm.mainValues);
      this.captchaFlagTip = this.auth_time + "秒之后重新发送";
      this.btnFlag = true;
      var auth_timetimer = setInterval(() => {
        this.auth_time--;
        this.btnFlag = true;
        if (this.auth_time <= 0) {
          this.inputFlag = false;
          this.btnFlag = false;
          this.captchaFlagTip = "重新发送";
          clearInterval(auth_timetimer);
        } else {
          this.captchaFlagTip = this.auth_time + "秒之后重新发送";
        }
      }, 1000);
    },
    // 封装发送验证码函数
    sendCaptcha(data) {
      getretrievePass(data).then((res) => {
        this.auth_time = res.data.time;
        this.$message({
          type: "success",
          message: "验证码已发送",
        });
      });
      this.inputFlag = true;
    },
    // 复制密码
    copyPassword() {
      let copy = this.$refs.copy;
      let clipboard = new Clipboard(copy, {
        text: () => {
          return this.newPassword;
        },
      });
      clipboard.on("success", (e) => {
        this.$message({
          message: "复制成功",
          showClose: true,
          type: "success",
        });
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        this.$message({ message: "复制失败,", showClose: true, type: "error" });
        clipboard.destroy();
      });
    },
    // 返回登陆
    toLogin() {
      this.$router.replace({ path: "/login" });
    },
  },
};
</script>

<style lang='scss' scoped>
.re-box {
  width: 100%;
  height: 100%;
  background: url(../../assets/images/background.svg);
  background-size: cover;
  .re-container {
    position: relative;
    width: 310px;
    max-width: 100%;
    min-height: 20px;
    padding-top: 200px;
    margin: auto;
    overflow: hidden;
  }
}

.sendBtn {
  font-size: 12px;
}
.tag {
  padding-top: 10px;
  cursor: pointer;
  word-break: break-all;
}

.step2-container {
  width: 100%;
  .toLoginBtn {
    text-align: center;
    padding-top: 40px;
  }
}
</style>